<template>
  <div class="flex items-center justify-between p-3 bg-blue-50 border border-blue-200 rounded-lg mb-3 animate-slideDown" v-if="hasSelection">
    <div class="flex items-center gap-6 text-sm">
      <span class="font-semibold text-gray-900">已选择 {{ selectionCount }} 个单元格</span>
      <span v-if="stats.sum !== null" class="flex items-center gap-1">
        <span class="text-gray-600">求和:</span>
        <span class="font-semibold text-blue-600">{{ formatNumber(stats.sum) }}</span>
      </span>
      <span v-if="stats.average !== null" class="flex items-center gap-1">
        <span class="text-gray-600">平均:</span>
        <span class="font-semibold text-blue-600">{{ formatNumber(stats.average) }}</span>
      </span>
    </div>
    
    <div class="flex items-center gap-2">
      <button 
        class="flex items-center gap-1 px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:border-blue-500 hover:text-blue-500 hover:bg-blue-50 transition-all active:translate-y-px"
        @click="$emit('batch-edit')"
        title="批量编辑 (F2)"
      >
        <span class="text-base">✏️</span>
        <span class="font-medium">编辑</span>
      </button>
      
      <button 
        class="flex items-center gap-1 px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:border-blue-500 hover:text-blue-500 hover:bg-blue-50 transition-all active:translate-y-px"
        @click="$emit('batch-clear')"
        title="清空内容 (Delete)"
      >
        <span class="text-base">🧹</span>
        <span class="font-medium">清空</span>
      </button>
      
      <div class="flex rounded overflow-hidden border border-gray-300">
        <button 
          class="px-2 py-1.5 text-sm bg-white hover:bg-blue-50 hover:text-blue-500 transition-colors border-r border-gray-300"
          @click="$emit('batch-fill', 'down')"
          title="向下填充 (Ctrl+D)"
        >
          <span class="text-base">↓</span>
        </button>
        <button 
          class="px-2 py-1.5 text-sm bg-white hover:bg-blue-50 hover:text-blue-500 transition-colors border-r border-gray-300"
          @click="$emit('batch-fill', 'up')"
          title="向上填充"
        >
          <span class="text-base">↑</span>
        </button>
        <button 
          class="px-2 py-1.5 text-sm bg-white hover:bg-blue-50 hover:text-blue-500 transition-colors border-r border-gray-300"
          @click="$emit('batch-fill', 'right')"
          title="向右填充"
        >
          <span class="text-base">→</span>
        </button>
        <button 
          class="px-2 py-1.5 text-sm bg-white hover:bg-blue-50 hover:text-blue-500 transition-colors"
          @click="$emit('batch-fill', 'left')"
          title="向左填充"
        >
          <span class="text-base">←</span>
        </button>
      </div>
      
      <button 
        class="flex items-center gap-1 px-3 py-1.5 text-sm text-red-600 bg-white border border-gray-300 rounded hover:border-red-500 hover:bg-red-50 transition-all active:translate-y-px"
        @click="$emit('batch-delete')"
        title="删除选中的行"
      >
        <span class="text-base">🗑️</span>
        <span class="font-medium">删除行</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  selectionCount: number
  stats: {
    count: number
    sum: number | null
    average: number | null
    min: number | null
    max: number | null
    uniqueCount: number
  }
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'batch-edit': []
  'batch-clear': []
  'batch-fill': [direction: string]
  'batch-delete': []
}>()

const hasSelection = computed(() => props.selectionCount > 0)

function formatNumber(value: number): string {
  if (Math.abs(value) >= 1000000) {
    return (value / 1000000).toFixed(2) + 'M'
  } else if (Math.abs(value) >= 1000) {
    return (value / 1000).toFixed(2) + 'K'
  }
  return value.toFixed(2)
}
</script>

<style scoped>
@keyframes slideDown {
  from {
    @apply opacity-0 -translate-y-2;
  }
  to {
    @apply opacity-100 translate-y-0;
  }
}

.animate-slideDown {
  animation: slideDown 0.2s ease-out;
}

/* 响应式隐藏文字 */
@media (max-width: 768px) {
  .toolbar-btn span:last-child {
    @apply hidden;
  }
}
</style> 